﻿<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-collapse accordion default-active-key="1" :bordered="false" v-model="activeKey">
          <a-collapse-panel :style="customStyle" key="1" header="设备基本信息">
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="设备编号" prop="DeviceNo">
                  <a-input v-model="entity.DeviceNo" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="品牌型号" v prop="DeviceBrandModel">
                  <a-input v-model="entity.DeviceBrandModel" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="持有人" prop="EmpId">
                  <a-select
                    show-search
                    @change="EMPChange"
                    option-filter-prop="children"
                    v-model="entity.EmpId"
                    :filter-option="filterOption"
                  >
                    <a-select-option v-for="(item, index) in EmpList" :key="index" :value="item.Id">
                      {{ item.EmpName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="所有权" prop="">
                  <a-select placeholder="请选择车辆是否为本人所有">
                    <a-select-option value="china"> 所有权为本人所有 </a-select-option>
                    <a-select-option value="usa"> 所有权非本人所有 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="设备购置金额" prop="PurchasingPrice">
                  <a-input v-model="entity.PurchasingPrice" @change="formatPrice" allow-clear autocomplete="off" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="月租金标准上限" prop="Rental">
                  <a-input v-model="entity.Rental" :disabled="true" autocomplete="off" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="审核状态">
                  <a-radio-group default-value="1" button-style="solid" v-model="entity.Status">
                    <a-radio-button :value="0">
                      待审核
                    </a-radio-button>
                  <a-radio-button :value="1">
                      审核通过
                  </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
          <a-collapse-panel :style="customStyle" key="2" header="设备需上传材料">
            <a-row>
              <a-col :span="6">
                <a-form-model-item label="" ref="VehiclelicensePhoto" prop="VehiclelicensePhoto">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload1"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img style="width:102px;height:102px" v-if="entity.VehiclelicensePhoto" :src="entity.VehiclelicensePhoto" alt="登记证照片" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">登记证照片</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="" ref="BuyDeviceInvoicePhoto" prop="BuyDeviceInvoicePhoto">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload2"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img style="width:102px;height:102px" v-if="entity.BuyDeviceInvoicePhoto" :src="entity.BuyDeviceInvoicePhoto" alt="购置发票照片" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">购置发票照片</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="" ref="CompulsoryinsurancePhoto" prop="CompulsoryinsurancePhoto">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload3"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img style="width:102px;height:102px"
                      v-if="entity.CompulsoryinsurancePhoto"
                      :src="entity.CompulsoryinsurancePhoto"
                      alt="交强险照片"
                    />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">交强险照片</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="" ref="CommercialinsurancePhoto" prop="CommercialinsurancePhoto">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload4"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img
                    style="width:102px;height:102px"
                      v-if="entity.CommercialinsurancePhoto"
                      :src="entity.CommercialinsurancePhoto"
                      alt="商业险照片"
                    />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">商业险照片</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-model-item label="" ref="DevicefrontPhoto" prop="DevicefrontPhoto">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload5"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img style="width:102px;height:102px" v-if="entity.DevicefrontPhoto" :src="entity.DevicefrontPhoto" alt="设备正面照片" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">设备正面照片</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="" ref="DevicesidePhoto" prop="DevicesidePhoto">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload6"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img style="width:102px;height:102px" v-if="entity.DevicesidePhoto" :src="entity.DevicesidePhoto" alt="设备侧面照片" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">设备侧面照片</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="" ref="DeviceNameplate" prop="DeviceNameplate">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload7"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img style="width:102px;height:102px" v-if="entity.DeviceNameplate" :src="entity.DeviceNameplate" alt="设备铭牌" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">设备铭牌</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="" ref="DeviceCertification" prop="DeviceCertification">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="selfUpload8"
                    :before-upload="beforeUpload"
                    @change="handleChange"
                  >
                    <img style="width:102px;height:102px" v-if="entity.DeviceCertification" :src="entity.DeviceCertification" alt="设备合格证" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">设备合格证</div>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
 
<script>
function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

export default {
  props: {
    parentObj: Object,
  },
  data() {
    return {
      customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      activeKey: ['1'], //折叠面板
      visible: false,
      loading: false,
      entity: {},
      rules: {
        DeviceNo:[{ required: true, message: '请输入设备编号' }],
        DeviceBrandModel:[{ required: true, message: '请输入品牌及型号' }],
        EmpId:[{ required: true, message: '请选择持有人' }],
        PurchasingPrice:[{ required: true, message: '请输入购置金额' }],
        // VehiclelicensePhoto: [{ required: true, message: '请上传登记证照片', trigger: 'change' }],
        // BuyDeviceInvoicePhoto: [{ required: true, message: '请上传购置发票照片', trigger: 'change' }],
        // CompulsoryinsurancePhoto: [{ required: true, message: '请上传交强险电子保单', trigger: 'change' }],
        // CommercialinsurancePhoto: [{ required: true, message: '请上传商业险电子保单', trigger: 'change' }],
        // DevicefrontPhoto: [{ required: true, message: '请上传设备正面照片', trigger: 'change' }],
        // DevicesidePhoto: [{ required: true, message: '请上传设备侧面照片', trigger: 'change' }],
        // DeviceNameplate: [{ required: true, message: '请上传设备铭牌', trigger: 'change' }],
        // DeviceCertification: [{ required: true, message: '请上传设备合格证', trigger: 'change' }],
      },
      title: '新增表单',
      EmpList: [], //所有人选择框
      loading: false,
      imageUrl: '',
      isdevice:1,
    }
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.$http.post('/Base_Manage/Home/GetEmployess').then((resJson) => {
        this.EmpList = resJson.Data
      })
    },
    openForm(id, title) {
      this.isdevice = title
      this.init()
      this.title = '新增表单'
      if (id) {
        this.title = '编辑表单'
        this.loading = true
        this.$http.post('/Base_Leasesystem_equipment/leasesystem_equipment/GetTheData', { id: id }).then((resJson) => {
          this.loading = false
          this.entity = resJson.Data
        })
      }
    },
    handleSubmit() {
      console.log(this.entity)
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          this.$message.warning('请确实信息完整！')
          return
        }
        this.loading = true
        this.$http.post('/Base_Leasesystem_equipment/leasesystem_equipment/SaveData', this.entity).then((resJson) => {
          this.loading = false
          console.log(resJson)
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            if(this.isdevice == 1){
              this.parentObj.getDataList1()
            }else{
              this.parentObj.getDataList()
            }

            
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    EMPChange(value){
      let obj = {};
         obj = this.EmpList.find((item)=>{ //这里的Data就是上面遍历的数据源
           return item.Id === value; //筛选出匹配数据
         });
         console.log(obj)
      this.entity.EmpName = obj.EmpName
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    selfUpload1({ action, file, onSuccess, onError, onProgress }) {
      this.$refs.VehiclelicensePhoto.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.VehiclelicensePhoto = res.url
        this.loading = false
      })
    },
    selfUpload2({ action, file, onSuccess, onError, onProgress }) {
       this.$refs.BuyDeviceInvoicePhoto.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.BuyDeviceInvoicePhoto = res.url
        this.loading = false
      })
    },
    selfUpload3({ action, file, onSuccess, onError, onProgress }) {
       this.$refs.CompulsoryinsurancePhoto.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.CompulsoryinsurancePhoto = res.url
        this.loading = false
      })
    },
    selfUpload4({ action, file, onSuccess, onError, onProgress }) {
       this.$refs.CommercialinsurancePhoto.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.CommercialinsurancePhoto = res.url
        this.loading = false
      })
    },
    selfUpload5({ action, file, onSuccess, onError, onProgress }) {
       this.$refs.DevicefrontPhoto.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.DevicefrontPhoto = res.url
        this.loading = false
      })
    },
    selfUpload6({ action, file, onSuccess, onError, onProgress }) {
       this.$refs.DevicesidePhoto.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.DevicesidePhoto = res.url
        this.loading = false
      })
    },
    selfUpload7({ action, file, onSuccess, onError, onProgress }) {
       this.$refs.DeviceNameplate.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.DeviceNameplate = res.url
        this.loading = false
      })
    },
    selfUpload8({ action, file, onSuccess, onError, onProgress }) {
       this.$refs.DeviceCertification.clearValidate()
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        console.log(res)
        this.entity.DeviceCertification = res.url
        this.loading = false
      })
    },
    //所有人选择框改变事件
    handleChange(value) {
      console.log(value)
      this.entity.EmpId = value.key
      this.entity.EmpName = value.label
    },
    formatPrice() {
      const temp = parseInt(this.entity.PurchasingPrice / 10)
      this.entity.Rental = parseInt(parseInt(temp / 100) + '00')
    },
  },
}
</script>

<style scoped>
.avatar-uploader {
  width: 200px;
  height: 80px;
}
</style>
